<template>
	<!--pages/orderList/orderList.wxml-->

	<view class="container">
		<view class="search">
			<view class="icon-cl">
				<image class="icon" src="/static/myorder/search.png" />
			</view>
			<input class="text" v-model="query" @confirm="search" placeholder="输入关键字搜索" />
		</view>
		<!-- 头部菜单 -->
		<view class="order-tit">
			<text @tap="onStsTap" data-sts="0" :class="sts==0?'on':''">全部</text>
			<!-- <text @tap="onStsTap" data-sts="1" :class="sts==1?'on':''">待支付</text> -->
			<text @tap="onStsTap" data-sts="2" :class="sts==2?'on':''">待发货</text>
			<text @tap="onStsTap" data-sts="3" :class="sts==3?'on':''">待收货</text>
			<text @tap="onStsTap" data-sts="5" :class="sts==5?'on':''">已完成</text>
		</view>
		<!-- end 头部菜单 -->
		<view class="main">
			<view class="empty" v-if="list.length==0">
				还没有任何相关订单
			</view>
			<!-- 订单列表 -->
			<block v-for="(item, index) in list" :key="index">
				<view class="prod-item">
					<view class="order-num">
						<text style="display:-webkit-box;-webkit-box-orient: vertical;width:500rpx;white-space:nowarp;over-flow:hidden;text-overflow:ellipsip;-webkit-line-clamp: 1;overflow: hidden; ">订单编号：{{item.orderId}}</text>
						<view class="order-state">
							<text
								:class="'order-sts  ' + (item.shipStatus==1?'red':'') + '  ' + ((item.shipStatus==2)?'gray':'')">{{(item.shipStatus==0?'待发货':(item.shipStatus==1?'待收货':(item.shipStatus==2?'已完成':(item.shipStatus==3?'已评价':'已取消'))))}}</text>

							<view class="clear-btn" v-if="item.shipStatus==2">
								<image src="/static/images/icon/clear-his.png" class="clear-list-btn"
									@tap="delOrderList" :data-ordernum="item.orderId"></image>
							</view>
						</view>
					</view>

					<!-- 商品列表 -->
					<!-- 一个订单单个商品的显示 -->
					<block >
						<!-- <block v-for="(prod, index2) in item.orderItemDtos" :key="index2"> -->
							<view>
								<view class="item-cont" @tap="toCommentDetail(item.orderId)" :data-ordernum="item.orderId">
									<view class="prod-pic">
										<image :src="item.goodImage" ></image>
									</view>
									<view class="prod-info">
										<view class="prodname">
											{{item.goodName}}
										</view>
										<view class="prod-info-cont">{{item.goodPrice}}</view>
										<view class="price-nums">
											<text class="prodprice"><text class="symbol">￥</text>
												<text class="big-num">{{0}}</text>
												<text class="small-num">.{{0}}</text></text>
											<text class="prodcount">x{{1}}</text>
										</view>
									</view>
								</view>
							</view>
						<!-- </block> -->
					</block>
					<!-- 一个订单多个商品时的显示 -->
	<!-- 				<block v-else>
						<view class="item-cont" @tap="toOrderDetailPage" :data-ordernum="item.orderId">
							<scroll-view scroll-x="true" scroll-left="0" scroll-with-animation="false"
								class="categories">
								<block v-for="(prod, index2) in item.orderItemDtos" :key="index2">
									<view class="prod-pic">
										<image :src="prod.pic"></image>
									</view>
								</block>
							</scroll-view>
						</view>
					</block> -->

					<view class="total-num">
						<text class="prodcount">共1件商品</text>
						<view class="prodprice">合计：
							<text class="symbol">￥</text>
							<text class="big-num">{{0}}</text>
							<text class="small-num">.{{0}}</text>
						</view>
					</view>
					<!-- end 商品列表 -->
					<view class="prod-foot">
						<view class="btn">
							<text v-if="item.shipStatus==0" class="button" @tap="onCancelOrder(item.orderId)"
								:data-ordernum="item.orderId" hover-class="none">取消订单</text>
							<!-- <text class="button warn" @tap :data-ordernum="item.orderId" hover-class="none">再次购买</text> -->
<!-- 							<text v-if="item.shipStatus==1" class="button warn" @tap="normalPay"
								:data-ordernum="item.orderId" hover-class="none">付款</text> -->
							<text v-if="item.shipStatus==1 " class="button" @tap="toDeliveryPage"
								:data-ordernum="item.orderId" hover-class="none">查看物流</text>
							<text v-if="item.shipStatus==1" class="button warn" @tap="onConfirmReceive(item.orderId)"
								:data-ordernum="item.orderId" hover-class="none">确认收货</text>
								<text v-if="item.shipStatus==2" class="button warn" @tap="onComment(item)"
									:data-ordernum="item.orderId" hover-class="none">去评价</text>
						</view>
					</view>
				</view>



			</block>


		</view>
	</view>
	<!-- end 订单列表 -->
</template>

<script>
	export default {
		data() {
			return {
				userdata: {
					token: '',
					openId: '',
				},
				list: [],
				current: 1,
				pages: 0,
				sts: 0,

				isShowDelOrderPopup: false, // 删除订单弹窗
				orderStatus: 0, // 订单状态
				pageNum: 1,
				pages: 0,
				
				query:'',
				// orderList: [{
				// 		orderItems: [{
				// 			spuName: "国行正品手机iPhone14pro",
				// 			skuName: "银色256G",
				// 			pic: "/static/phone.png"
				// 		}],
				// 		allCount: 1,
				// 		status: 5,
				// 		shopName: "店铺名称",

				// 	},
				// 	{
				// 		orderItems: [{
				// 			spuName: "国行正品手机iPhone14pro",
				// 			skuName: "银色256G",
				// 			pic: "/static/phone.png"
				// 		}],
				// 		allCount: 1,
				// 		status: 5,
				// 		shopName: "店铺名称",
				// 	}
				// ],

				scrollTop: 0,
				navIndex: 0,
				tabBars: [{
					name: '待支付',
					id: 'pay'
				}, {
					name: '待收货',
					id: 'reccive'
				}, {
					name: '已完成',
					id: 'finish'
				}],

				// operType: 0, // 订单操作类型:0取消; 1删除
				operOrderId: '', // 当前操作的订单id
			}
		},
		onLoad(e) {
			this.sts=e.sts
			this.getStorage()
			this.loadOrderData(this.sts)
		},
		onShow() {
			this.loadOrderData(this.sts)
		},

		methods: {
			/**
			 * 状态点击事件
			 */
			onStsTap:function(e) {
				var sts = e.currentTarget.dataset.sts;
				this.sts=sts
				this.loadOrderData(sts);
				this.query=""
			},
			toCommentDetail(orderId){
				uni.navigateTo({
					url:'/pages/comment/comment?orderId='+orderId
				})
			},
			search(e){
				let name=e.detail.value
				this.loadOrderData(this.sts,name)
			},
			onComment(e){
				console.log(e)
				let businessId=e.businessId
				let goodId=e.goodId
				uni.navigateTo({
					// url: '/pages/add-comment/add-comment?&businessId='+businessId+'&goodId='+goodId,
					url: '/pages/add-comment/add-comment?item='+encodeURIComponent(JSON.stringify(e)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onCancelOrder(orderId){
				console.log('删除订单');
			},
			onConfirmReceive(orderId){
				this.$myRequest({
					url:'/user/confirmRecipt?orderId='+orderId,
					method:'PUT',
					header:{
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded',
					},
				}).then(res=>{
					console.log('完成！',res)
					this.loadOrderData(this.sts)
					// uni.navigateTo({
					// 	url:'/pages/myorder/myorder?sts=3'
					// })
				})
			},
			loadOrderData:function(sts, name) {
				// uni.showLoading(); //加载订单列表
				var statusMap=["","","0","1","","2"]
				console.log(statusMap[sts],'status');
				this.$myRequest({
					url: '/user/getAwardList',
					header: {
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded',
					},
					data: {
						openId: this.userdata.openId,
						name:name?name:"",
						shipStatus:statusMap[sts]
					}
				}).then(res => {
					this.list=res.data
					console.log(this.list,'list')
				})
			},

			checkIndex(index) {
				this.navIndex = index;
				console.log(index)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//滑动切换swiper
			tabChange(e) {
				const navIndex = e.detail.current
				this.navIndex = navIndex
			},
			switchOrderSts(sts) {
				this.orderStatus = sts
				this.pageNum = 1
				// this.getOrderList()
			},
			async getStorage() {
				const openId = uni.getStorageSync('openId')
				const token = uni.getStorageSync('token')
				this.userdata.openId = openId
				this.userdata.token = token
			}
		}
	}
</script>

<style>
	@import './orderList.css';

	/* 搜索框样式 */
	.search {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-left: 3%;
		width: 94%;
		height: 50rpx;
		background-color: whitesmoke;
		margin-top: 3%;
		margin-bottom: 1%;
		border: 1rpx solid whitesmoke;
		border-radius: 20rpx;
	}

	/* 搜索框提示文字样式 */
	.search input {
		font-size: 27rpx;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		padding-left: 30rpx;
	}

	/* 搜索框小图标 */
	.search image {
		width: 40rpx;
		height: 40rpx;
		padding-right: 20rpx;
	}

	/* 筛选 */
	.order .tab {
		position: fixed;
		top: 100rpx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx 30rpx;
		background: #fff;
		box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, .01);
		border-radius: 0 0 10rpx 10rpx;
	}

	.order .tab .item {
		position: relative;
		line-height: 28rpx;
		padding: 0 10rpx;
	}

	.order .tab .item::after {
		position: absolute;
		bottom: -10rpx;
		left: 14%;
		right: 14%;
		display: block;
		width: auto;
		height: 4rpx;
		border-radius: 4rpx;
		content: " ";
		font-size: 0;
		background: #fff;
	}

	.order .tab .item.active {
		font-weight: 600;
	}

	.order .tab .item.active::after {
		background: linear-gradient(to right, #fc1b35, #fff);
	}

	/*订单*/

	.order .order-box .item {
		background: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 0 30rpx;
	}

	.order .order-box .item .shop-info {
		display: flex;
		align-items: center;
		position: relative;
		padding: 30rpx 0;
		overflow: hidden;
	}

	.order .order-box .item .shop-info .shop {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.order .order-box .item .shop-info .shop .icon {
		width: 24rpx;
		height: 24rpx;
		font-size: 0;
		margin-right: 10rpx;
	}

	.order .order-box .item .shop-info .shop .name {
		font-weight: 600;
		color: black;
	}

	.order .order-box .item .shop-info .status {
		color: #fc1b35;
	}

	.order .order-box .item .shop-info .order-complete {
		position: absolute;
		top: -20rpx;
		right: 64rpx;
		width: 90rpx;
		height: 90rpx;
		font-size: 0;
	}

	.order .order-box .item .shop-info .del {
		width: 24rpx;
		height: 24rpx;
		font-size: 0;
		padding: 10rpx;
		background: #f3f3f3;
		border-radius: 50%;
	}

	/*单个商品*/
	.order .order-box .item .single-prod {
		/* background-color: blue; */
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
	}

	.order .order-box .item .single-prod .prod-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		overflow: hidden;
		font-size: 0;
	}

	.order .order-box .item .single-prod .text-box {
		flex: 1;
		margin-left: 20rpx;
		align-self: flex-start;
		position: relative;
		height: 160rpx;
	}

	.order .order-box .item .single-prod .text-box .name {
		max-height: 64rpx;
		line-height: 32rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.order .order-box .item .single-prod .text-box .sku {
		margin-top: 10rpx;
		color: #999;
		font-size: 20rpx;
	}

	.order .order-box .item .single-prod .text-box .price-box {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 4rpx;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		line-height: 1;
	}

	.order .order-box .item .single-prod .text-box .price-box .price {
		color: #333;
	}

	.order .order-box .item .single-prod .text-box .price-box .count {
		color: #999;
		margin-right: 20rpx;
	}


	.order .order-box .nomore {
		text-align: center;
		color: #999;
	}

	/* 待支付 */
	.activite {
		color: #e65b3f;
		font-weight: bolder;
	}

	.content {
		margin-top: -50rpx;
		height: 700px;
		color: #fff;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		color: #b5b5b5;
	}

	.scroll-view-item_H {
		margin-top: 50rpx;
		display: inline-block;
		width: 30%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		padding: 30px 5px;
		font-size: 32rpx;
	}

	/*全部订单*/
	.chanpins {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100%;
		background: white;
	}

	.danhao {
		font-size: 12px;
		color: gray;
		height: 80rpx;
		margin-left: 20rpx;
		border-bottom: 1rpx solid #ECECEC;
		background: white;
		display: flex;
		align-items: center;
	}

	.chanpin {
		display: flex;
		padding: 15rpx;
		height: 130rpx;
		border-bottom: 1rpx solid #ECECEC;
		background: white;
	}

	.chanpin-img {
		width: 120rpx;
		height: 120rpx;
	}

	.chanpin-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 1;
		margin-left: 20rpx;
	}

	.name {
		font-size: 30rpx;
	}

	.sales {
		font-size: 25rpx;
		color: #ACACAC;
		text-align: left;
	}

	.price {
		font-size: 30rpx;
		color: red;
		text-align: left;
	}

	.chanpin-num {
		height: 50rpx;
		display: flex;
		margin-top: 30rpx;
		margin-right: 30rpx;
		line-height: 50rpx;
		font-size: 40rpx;
	}

	.jiesuan {
		font-size: 13px;
		color: gray;
		height: 100rpx;
		margin-left: 20rpx;
		border-bottom: 1rpx solid #ECECEC;
		background: white;
		display: flex;
		align-items: center;
	}

	.caozuo {
		height: 100rpx;
		border-bottom: 1rpx solid #ECECEC;
		background: white;
		display: flex;
		align-items: center;
	}
</style>